import React from 'react';


import classnames from 'classnames';
//component
import ReIcon from 'components/widgets/ReIcon';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            pcShow: false,
            phoneShow: false,
            scroll: null
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {
        // global.window.addEventListener('click', () => {
        //     this.setState({
        //         phoneShow: false,
        //         pcShow: false,
        //     })
        // });
    }

    closePc() {
        this.setState({
            pcShow: false,
        });
    }

    // componentWillReceiveProps(nextProps) {
    //     if (nextProps.codeList.length > 0 && !this.state.scroll && !$$.utils.IsPC()) {
    //         setTimeout(() => {
    //             this.state.scroll.refresh();
    //             console.log(this.state.scroll);
    //         }, 20);
    //         this.setState({
    //             scroll: new BScroll('#scrollWrapper', {
    //                 probeType: 1,
    //                 click: true
    //             })
    //         });
    //
    //     }
    // }
    //

    componentWillUnmount() {
        this._isMounted = false;
    }

    toggleListWrapperShow(e) {
        e && e.preventDefault();
        e && e.stopPropagation();
        if ($$.utils.IsPC()) {
            this.setState({
                pcShow: !this.state.pcShow
            });
        } else {
            this.setState({
                    phoneShow: !this.state.phoneShow
                }, () => {
                    console.log(this.state.phoneShow);
                    console.log('加载完成');
                    let loginWrapper = document.getElementById('loginWrapper');
                    let artistInfo = document.getElementById('artistInfo');
                    let artistUpload = document.getElementById('artistUpload');
                    if (this.state.phoneShow) {
                        if (loginWrapper) {
                            loginWrapper.style.overflowY = 'visible';
                        }
                        if (artistInfo) {
                            artistInfo.style.overflowY = 'visible';
                            artistInfo.style.overflowX = 'visible';
                        }
                        if (artistUpload) {
                            artistUpload.style.overflowY = 'visible';
                            artistUpload.style.overflowX = 'visible';
                        }
                    } else {
                        if (loginWrapper) {
                            loginWrapper.style.overflowY = 'scroll';
                        }
                        if (artistInfo) {
                            artistInfo.style.overflowY = 'scroll';
                            artistInfo.style.overflowX = 'hidden';
                        }
                        if (artistUpload) {
                            artistUpload.style.overflowY = 'scroll';
                            artistUpload.style.overflowX = 'hidden';
                        }
                    }
                }
            )
        }
    }


    render() {
        const {codeList, currentSelect, onChange} = this.props;
        const {pcShow, phoneShow} = this.state;
        const classNames = classnames({
            'orin-w-countrycodeselect-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames}>
                <div className="country-code-wrapper">
                    <div className="country-code-current" onClick={(e) => this.toggleListWrapperShow(e)}>
                        <span className="code-text">{currentSelect.code || '+86'}</span>
                        <ReIcon className="icon" icon="xiala"/>
                    </div>
                </div>
                <div className={pcShow ? 'country-code-mask fade-in' : 'country-code-mask fade-out'}
                     onClick={() => this.closePc()}>
                    <div className="country-wrapper" onClick={(e) => e.stopPropagation()}>
                        <div className="country-header">
                            <span className="header-title">{'国家区号'}</span>
                            <span className="header-close" onClick={() => this.closePc()}>
                                        <ReIcon icon="window_closes" className="icon"/>
                                    </span>
                        </div>
                        <div className="country-content">
                            <div className="country-code-list">
                                {
                                    codeList.length > 0 && codeList.map(item => {
                                        return (
                                            <div key={item.id} onClick={(e) => {
                                                this.toggleListWrapperShow(e);
                                                onChange && onChange(item);
                                            }}
                                                 className="country-code-item">
                                                {item.name}{item.code}
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>

                    </div>
                </div>
                {
                    <div className={phoneShow ? 'country-code-phone-mask show' : 'country-code-phone-mask hide'}>
                        <div className="country-code-phone-wrapper">
                            <div className="country-code-phone-header">
                                <div className="code-text">国家代码</div>
                                <div className="arrow-wrapper" onClick={(e) => this.toggleListWrapperShow()}>
                                    <ReIcon icon='left1' className='icon'/>
                                </div>
                            </div>
                            {/*<div className="country-code-phone-scroll" id="scrollWrapper">*/}
                            {/*<div>*/}
                            <div className="country-code-phone-content">
                                {
                                    codeList.length > 0 && codeList.map(item => {
                                        return (
                                            <div key={item.id} onClick={(e) => {
                                                this.toggleListWrapperShow(e);
                                                onChange && onChange(item);
                                            }}
                                                 className="country-code-phone-item">
                                                {item.name}{item.code}
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            {/*</div>*/}

                            {/*</div>*/}

                        </div>
                    </div>
                }
            </div>
        );
    }
}
